<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import Input from '../components/Input.vue'
import axios from 'axios'
import { saveAs } from 'file-saver';

function handleSubmit(url) {
    console.log(url);
    // 使用 axios 发起 GET 请求，设置 responseType 为 blob
    axios.get("http://127.0.0.1:8080/one/", {
        params: { url: url },
        responseType: 'blob', // 这个设置确保 axios 接收到的是 Blob 类型的响应
    }).then(res => {
        // 使用 FileSaver.js 库保存文件
        // 库会自动从 Content-Disposition 响应头获取文件名
        saveAs(res.data); // 这里可以提供一个默认文件名，实际文件名会从响应头中获取
    }).catch(err => {
        // 打印错误信息
        console.error('Error:', err);
        if (err.response) {
            console.log('Status:', err.response.status);
            console.log('Headers:', err.response.headers);
        } else if (err.request) {
            console.log('Request:', err.request);
        } else {
            console.log('Error Message:', err.message);
        }
    });
}
</script>

<template>
    <h1>获取单个博客文章</h1>
    <Input :handle-submitter="handleSubmit" />
</template>

<style scoped></style>